<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>接口请求</title>
		<!-- <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- import Vue.js -->
		<script src="https://unpkg.com/vue@next"></script>
		<!-- import stylesheet -->
		<link rel="stylesheet" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
		<!-- import View UI Plus -->
		<script src="https://unpkg.com/view-ui-plus"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<Row style="margin-top: 24px;">
				<i-col span="22" offset="1">
					<i-form :model="form" :rules="rules" ref="form" :label-width="80">
						<Form-item label="接口地址" prop="url">
							<i-input v-model="form.url" placeholder="请输入" clearable></i-input>
						</Form-item>
						<Form-item label="请求方式">
							<i-select v-model="form.methods" placeholder="请选择请求方式">
								<i-option value="get">get</i-option>
								<i-option value="post">post</i-option>
								<i-option value="put">put</i-option>
								<i-option value="delete">delete</i-option>
								<i-option value="patch">patch</i-option>
							</i-select>
						</Form-item>
						<Form-item label="请求头">
							<i-input v-model="form.headers" :rows="10" maxlength="5000" show-word-limit
								type="textarea" placeholder="请输入json字符串"></i-input>
						</Form-item>
						<Form-item label="请求参数">
							<i-input v-model="form.parameter" :rows="6" maxlength="500" show-word-limit
								type="textarea" placeholder="请输入json字符串"></i-input>
						</Form-item>
						<Form-item>
							<i-button type="primary" @click="onSubmit">发送</i-button>
							<i-button @click="reset" style="margin-left: 24px;">重置</i-button>
						</Form-item>
					</i-form>
				</i-col>
			</Row>
		</div>
		<script>
			const App = {
				data() {
					return {
						result: '',
						form: {
							url: '',
							methods: 'get',
							parameter: '',
							headers: ''
						},
						rules: {
							url: [{
								required: true,
								message: '请输入接口地址',
								trigger: 'blur'
							}],
						}
					}
				},
				methods: {
					onSubmit() {
						this.result = ''
						const {
							url,
							methods,
							parameter,
							headers,
						} = this.form
						this.$refs['form'].validate((valid) => {
							if (valid) {
								axios({
									method: methods,
									url,
									headers: headers ? eval("(" + headers +')') : {},
									data: parameter ? eval("(" + parameter +')') : {}
								})
							}
						})
					},
					reset() {
						this.result = ''
						this.$refs['form'].resetFields()
					}
				}
			};
			Vue.createApp(App).use(ViewUIPlus).mount('#app');
		</script>
	</body>
</html>
